<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
    <script>
        function f1() {
            let user = {"id": 1, "username": "admin", "password": "123456"};
            console.log(user);
            // 相当于对象的get方法
            console.log(user.id);
            console.log(user['username']);
            console.log(user["password"]);
            // 相当于对象的set方法
            user.id = 2;
            user['username'] = "alex";
            console.log(user);
        }

        function f2() {
            let user = {
                "id": 1,
                "username": "admin",
                "password": "123456",
                "address": {"province": "江苏", "city": "南京"}
            };
            let address = {"province": "江苏", "city": "南京"};
            let user2 = {"id": 1, "username": "admin", "password": "123456", "address": address};
            // 在获取对象中的对象属性的属性的时候
            // 可以通过对象名.对象属性名.属性名操作
            // 也可以通过对象名['对象属性名']['属性名']操作
            // 两种方式可以混用,但是在实际开发中不建议混用
            // 对象.属性的方式在属性名以数字开头时不能用,但是以数字开头的属性名不符合编码规范
            console.log(user.id);
            console.log(user.address.province)
            console.log(user.address["province"])
            console.log(user["address"]["province"])
            console.log(user["address"].province)
        }
        function f3(){
            let users = [{
                "id": 1,
                "username": "admin",
                "password": "111111"
            },{
                "id": 2,
                "username": "jack",
                "password": "222222"
            },{
                "id": 3,
                "username": "tom",
                "password": "333333"
            },{
                "id": 4,
                "username": "lucy",
                "password": "444444"
            }];
            console.log(users[0].id)
            console.log(users[1].username)
            console.log(users[2]['password'])
        }
    </script>
</head>
<body>
<button onclick="f1()">基本语法</button><br>
<button onclick="f2()">对象中包含对象</button><br>
<button onclick="f3()">对象数组</button><br>
</body>
</html>